import React, { useState } from "react";
import { Image, Text, TouchableOpacity, View, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import styles from "./index.style";
import { MessageButton, VideoCallButton } from "./components";
import { useTheme } from "@/contexts/ThemeContext";
import { useFriendCommunication } from "@/hooks/Friend/friendCommunication";
import Modal from "@/components/Global/Modal";
import { DEFAULT_AVATAR_URL } from "@/config/default-value";
import {UserProfileType} from "@/types/user-profile";
import Clipboard from "@react-native-clipboard/clipboard";

export interface FriendInformationCardProps {
  userInfo: UserProfileType;
}

const FriendInformationCard: React.FC<FriendInformationCardProps> = ({
  userInfo: user,
}) => {
  console.log(user)
  const { colors, activeTheme } = useTheme();

  // 获取用户在线状态
  // const isOnline = user.status ? user.status === FriendStatus.ONLINE : false;

  // 使用通信 hook
  const { handleSendMessage, handleVideoCall, handleVoiceCall } =
    useFriendCommunication();

  // 添加模态框状态
  const [isCallModalVisible, setIsCallModalVisible] = useState(false);

  // 打开通话选项模态框
  const handleOpenCallModal = () => {
    setIsCallModalVisible(true);
  };

  // 关闭模态框
  const handleCloseModal = () => {
    setIsCallModalVisible(false);
  };

  // 处理视频通话
  const onVideoCall = () => {
    setIsCallModalVisible(false);
    handleVideoCall(user);
  };

  // 处理语音通话
  const onVoiceCall = () => {
    setIsCallModalVisible(false);
    handleVoiceCall(user);
  };

  // 处理发送消息
  const onSendMessage = () => {
    handleSendMessage(user);
  };

  return (
    <View
      style={[styles.container, { backgroundColor: colors.backgroundLight }]}
    >
      {/* 顶部个人资料区域 */}
      <View
        style={[
          styles.profileHeader,
          { backgroundColor: colors.card.background },
        ]}
      >
        <View style={styles.avatarWrapper}>
          <Image
            source={{ uri: user.avatar || DEFAULT_AVATAR_URL }}
            style={styles.avatar}
          />
          <View
            style={[
              styles.statusDot,
            ]}
          />
        </View>
        <View style={styles.profileInfo}>
          <Text style={[styles.nickname, { color: colors.text.primary }]}>
            {user.nickname}
          </Text>
          <View style={styles.statusRow}>
            <Text style={[styles.signature, { color: colors.text.secondary }]}>
              {user.uuid}
            </Text>
            <TouchableOpacity onPress={() => Clipboard.setString(user.uuid)}>

              <Ionicons name="copy" size={20} color={colors.primary} style={{ marginLeft: 8 }} />
            </TouchableOpacity>
          </View>
        </View>
      </View>

      {/* 个人信息卡片 */}
      <View
        style={[styles.infoCard, { backgroundColor: colors.card.background }]}
      >
        {/* 详细信息区域 */}
        <View style={styles.infoSection}>
          <View
            style={[
              styles.infoItem,
              {
                backgroundColor: colors.card.background,
                borderBottomColor: colors.border.divider,
              },
            ]}
          >
            <Text style={[styles.infoLabel, { color: colors.text.primary }]}>
              昵称
            </Text>
            <Text style={[styles.infoValue, { color: colors.text.secondary }]}>
              {user.nickname || "未设置"}
            </Text>
          </View>

          <View
            style={[
              styles.infoItem,
              {
                backgroundColor: colors.card.background,
                borderBottomColor: colors.border.divider,
              },
            ]}
          >
            <Text style={[styles.infoLabel, { color: colors.text.primary }]}>
              账号
            </Text>
            <Text style={[styles.infoValue, { color: colors.text.secondary }]}>
              {user.email}
            </Text>
          </View>

          <View
            style={[
              styles.infoItem,
              {
                backgroundColor: colors.card.background,
                borderBottomColor: colors.border.divider,
              },
            ]}
          >
            <Text style={[styles.infoLabel, { color: colors.text.primary }]}>
              性别
            </Text>
            <Text style={[styles.infoValue, { color: colors.text.secondary }]}>
              {
                user.gender === 0 ? "保密" :
                    user.gender === 1
                        ? "男"
                        : user.gender === 2
                            ? "女"
                            : "未设置或对方设置不可见"}
            </Text>
          </View>

          <View
            style={[
              styles.infoItem,
              {
                backgroundColor: colors.card.background,
                borderBottomColor: colors.border.divider,
              },
            ]}
          >
            <Text style={[styles.infoLabel, { color: colors.text.primary }]}>
              生日
            </Text>
            <Text style={[styles.infoValue, { color: colors.text.secondary }]}>
              {user.birthday || "未设置或对方设置不可见"}
            </Text>
          </View>
        </View>
      </View>

      {/* 第二个卡片 */}
      <View
        style={[styles.infoCard, { backgroundColor: colors.card.background }]}
      >
        <View style={styles.infoSection}>
          <View
            style={[
              styles.infoItem,
              {
                backgroundColor: colors.card.background,
                borderBottomColor: colors.border.divider,
              },
            ]}
          >
            <Text style={[styles.infoLabel, { color: colors.text.primary }]}>
              所在地
            </Text>
            <Text style={[styles.infoValue, { color: colors.text.secondary }]}>
              {user.region || "未设置或对方设置不可见"}
            </Text>
          </View>
        </View>
      </View>
      <View
        style={[styles.infoCard, { backgroundColor: colors.card.background }]}
      >
        <View style={styles.infoSection}>
          <View
            style={[
              styles.infoItem,
              {
                backgroundColor: colors.card.background,
                borderBottomColor: colors.border.divider,
              },
            ]}
          >
            <Text style={[styles.infoLabel, { color: colors.text.primary }]}>
              签名
            </Text>
            <Text style={[styles.infoValue, { color: colors.text.secondary }]}>
              {user.signature || "未设置或对方设置不可见"}
            </Text>
          </View>
        </View>
      </View>

      {/* 操作按钮区域 */}
      <View style={styles.actionSection}>
        <VideoCallButton onPress={handleOpenCallModal} />
        <MessageButton onPress={onSendMessage} />
      </View>

      {/* 通话选项模态框 */}
      <Modal
        visible={isCallModalVisible}
        onClose={handleCloseModal}
        position="bottom"
        animationType="slide"
        contentStyle={modalStyles.modalContent}
      >
        <View style={modalStyles.optionsContainer}>
          <View style={modalStyles.header}>
            <View style={modalStyles.handleBar} />
          </View>

          <TouchableOpacity
            style={[
              modalStyles.option,
              { borderBottomColor: colors.border.light },
            ]}
            onPress={onVideoCall}
          >
            <View style={modalStyles.optionContent}>
              <Ionicons name="videocam" size={24} color={colors.primary} />
              <Text
                style={[modalStyles.optionText, { color: colors.text.primary }]}
              >
                视频通话
              </Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              modalStyles.option,
              { borderBottomColor: colors.border.light },
            ]}
            onPress={onVoiceCall}
          >
            <View style={modalStyles.optionContent}>
              <Ionicons name="call" size={24} color={colors.primary} />
              <Text
                style={[modalStyles.optionText, { color: colors.text.primary }]}
              >
                语音通话
              </Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity
            style={modalStyles.cancelOption}
            onPress={handleCloseModal}
          >
            <Text
              style={[modalStyles.cancelText, { color: colors.text.secondary }]}
            >
              取消
            </Text>
          </TouchableOpacity>

          {/* 底部安全区域 */}
          <View style={modalStyles.safeArea} />
        </View>
      </Modal>
    </View>
  );
};

// 模态框样式
const modalStyles = StyleSheet.create({
  optionsContainer: {
    width: "100%",
  },
  modalContent: {
    width: "100%",
    padding: 0,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
  },
  header: {
    alignItems: "center",
    paddingVertical: 12,
  },
  handleBar: {
    width: 36,
    height: 5,
    borderRadius: 3,
    backgroundColor: "#CCCCCC",
  },
  option: {
    padding: 16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    alignItems: "center",
    justifyContent: "center",
  },
  optionContent: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  optionText: {
    fontSize: 17,
    marginLeft: 16,
    fontWeight: "500",
  },
  cancelOption: {
    alignItems: "center",
    padding: 16,
    marginTop: 8,
  },
  cancelText: {
    fontSize: 17,
    fontWeight: "500",
  },
  safeArea: {
    height: 34, // 为底部安全区域预留空间
  },
});

export default FriendInformationCard;
